<!--
 * @Author: wangzm
 * @Date: 2020-01-10 09:44:11
 * @LastEditors: wjk
 * @LastEditTime: 2020-12-14 11:48:27
 * @Description: 横向滚动列表
 -->
<template>
  <view class="horizontal-list" :class="listName+'-list'">
    <scroll-view scroll-x="true" :scroll-left="scrollLeft" :scroll-into-view="intoViewId" :show-scrollbar="false" scroll-with-animation class="scroll-container" @scroll="scroll">
      <view v-for="(item, index) in newList" :id="clickJust ? (listName + '-id_' + index) : ''" :key="item.keyIndex" :class="listName+'-item '+((index === current_index)?'active':'')" :style="itemStyle" @click="handleItemClick($event, index)">
        <slot :item="item" :index="index" :current-index="current_index" :otherParams="otherParams"></slot>
      </view>
    </scroll-view>
    <view v-if="showDot" class="scroll-bar-wrapper" :style="'bottom:' + bar.bottom">
      <view class="scroll-bar" :style="'width:' + bar.width + ';left:' + bar.left"></view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'HorizontalList',
  props: {
    listName: {
      type: String, // 列表名称，自动以名称来生成样式类
      required: true
    },
    itemStyle: {
      type: String, // 列表名称，自动以名称来生成样式类
      default: ''
    },
    list: {
      type: Array, // 列表数据
      default() {
        return []
      }
    },
    clickJust: {
      type: Boolean, // 点击子项，列表是否跟随滑动
      default: true
    },
    showDot: {
      type: Boolean,
      default: false
    },
    needClick: {
      type: Boolean,
      default: false
    },
    emitScrollIndex: {
      type: Boolean,
      default: false
    },
    clickEmitIndex: {
      type: [String, Number],
      default: -1
    },
    otherParams: {
      type: Object,
      default: null
    },
    fromSourch: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      windowWidth: 375,
      current_index: 0,
      scroll_index: 0,
      intoViewId: '',
      bar: {
        width: '20rpx',
        bottom: '20rpx',
        left: '0'
      },
      scrollLeft: 1
    }
  },
  computed: {
    newList() {
      const newList = []
      this.list.forEach((item, index) => {
        newList.push({
          keyIndex: (this.listName + '-' + index),
          ...item
        })
      })
      return newList
    }
  },
  watch: {
    list(newValue, oldValue) {
      if (!oldValue.length) {
        setTimeout(this.initData, 10)
      }
    }
  },
  created() {
    uni.getSystemInfo({
      success: ({ windowWidth }) => {
        this.windowWidth = windowWidth
      }
    })
  },
  mounted() {
    setTimeout(this.initData, 10)
    if (this.showDot) {
      this.scrollLeft = 0 // 触发滚动设置滚动跳宽度
      this.initScroll = true
    }
  },
  methods: {
    initData() { // 初始化
      if (this.clickJust) {
        const index = this.list.findIndex(i => i.checked)
        this.current_index = index > -1 ? index : 0
        let viewIndex = this.current_index
        if (viewIndex - 2 > -1) {
          viewIndex = viewIndex - 2
        } else if (viewIndex - 1 > -1) {
          viewIndex = viewIndex - 1
        }
        this.intoViewId = `${this.listName}-id_${viewIndex}`
      }
    },
    setIndex(index) { // 供父组件调用设置当前index
      this.current_index = index
      let viewIndex = this.current_index
      if (viewIndex - 2 > -1) {
        viewIndex = viewIndex - 2
      } else if (viewIndex - 1 > -1) {
        viewIndex = viewIndex - 1
      }
      this.intoViewId = `${this.listName}-id_${viewIndex}`
    },
    handleItemClick($event, index) {
      if (this.list[index] && this.list[index].needLogin && !(this.$store.state && this.$store.state.token)) {
        // if (this.list[index] && this.list[index].id === 1) { // 如果是跳转箱起的页面
        if (this.list[index] && this.list[index].type === 9) { // 如果是跳转箱起的页面
          uni.setStorage({ key: 'pageAfterLogin', data: '/pagesDetail/box/index' })
        }
        this.$navigateTo('/pages/login/index')
      } else if (this.current_index !== index) {
        if (this.fromSourch === 'home') {
          if (this.list[index].jumpType === 2) {
            // 跳h5的页面
            this.$emit('itemClick', index)
            return
          }
          if (this.list[index].type === 7 && this.list[index].typeVal || this.list[index].type === 9 || this.list[index].id === 0) {
            this.setScroll($event, index)
          }
        } else {
          this.setScroll($event, index)
        }
        this.$emit('itemClick', index)
      } else if (this.clickEmitIndex === index || this.needClick) {
        this.$emit('itemClick', index)
      }
    },
    setScroll($event, index) {
      this.current_index = index
      if (this.clickJust && $event && $event.detail && $event.detail.x) {
        const x = $event.detail.x
        let id = index
        if (x > (this.windowWidth / 2) || x < (this.windowWidth / 3)) {
          id--
        }
        if (id > -1 && id !== index) {
          this.intoViewId = `${this.listName}-id_${id}`
        }
      }
    },
    scroll(e) {
      if (this.emitScrollIndex) {
        const index = Math.floor((e.detail.scrollLeft / e.detail.scrollWidth) * this.newList.length)
        if (this.scroll_index === index) return
        this.scroll_index = index
        this.$emit('scrollIndexChange', this.scroll_index)
      }
      if (this.showDot) {
        const sWidth = 56 * this.windowWidth / 750 // 滚动条的外层宽
        const siWidth = 20 * this.windowWidth / 750
        if (this.initScroll) {
          this.initScroll = false
        } else {
          const maxDis = (e.detail.scrollWidth - this.windowWidth)
          const barMaxDis = sWidth - siWidth
          const barW = e.detail.scrollLeft / maxDis * barMaxDis
          this.bar.left = (barW < 0 ? 0 : Math.ceil(barW)) + 'px'
        }
      }
    }
  }
}
</script>
<style lang="scss">
.horizontal-list{
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
  }
}
.scroll-bar-wrapper {
  position: absolute;
  bottom: 20rpx;
  left: 50%;
  width: 56rpx;
  transform: translateX(-50%);
  height: 4rpx;
  background-color: rgba(0,0,0,0.3);
  .scroll-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 20rpx;
    height: 4rpx;
    background-color: rgba(0,0,0,0.9);
  }
}
</style>
